<template>
    <div class="platform">
        <div class="head">
            <img src="./img/1ping-beijing.png" alt="" />
        </div>
        <div class="banner2">
            <img src="./img/2ping-beijing.png" alt="" />
            <div class="box">
                <div
                    :class="
                        banner2Index === 0 ? 'customer mask-hover' : 'customer'
                    "
                    @mouseenter="banner2Index = 0"
                >
                    <img src="./img/2ping-beijing1.png" alt="" />
                    <div class="mask">
                        <img src="./img/2ping-icon-tuozhanxinke.png" alt="" />
                        <div class="radius"></div>
                        <h4 class="extend-h4">扩展新客</h4>
                        <p
                            v-show="banner2Index === 0"
                            class="animated bounceInUp"
                        >
                            基于Top
                            Ad自有营销平台海量数据源（自有数据、第三方数据）及精准定向能力，分析用户线上线下行为，重建全面的用户画像，在合适的场景将合适的广告用合适的方式推给合适的人，促使用户与广告主产生更多互动，从而使广告更有效。
                        </p>
                    </div>
                </div>
                <div
                    :class="
                        banner2Index === 1 ? 'customer mask-hover' : 'customer'
                    "
                    @mouseenter="banner2Index = 1"
                >
                    <img src="./img/2ping-beijing2.png" alt="" />
                    <div class="mask">
                        <img
                            class="img2"
                            src="./img/2ping-icon-dingxianglahuo.png"
                            alt=""
                        />
                        <div class="radius"></div>
                        <h4>重定向拉活</h4>
                        <p
                            v-show="banner2Index === 1"
                            class="animated bounceInUp"
                        >
                            海量用户数据结合垂直类流量数据的重定向标签，一键唤醒应用的沉默用户，有效提高用户参与度，从而驱动应用内转化。
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="feet">
            <hover-list :list="banner3Data" />
        </div>
        <div class="tail"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            banner2Index: 3,
            banner3Data: [
                {
                    name: "海量媒体资源",
                    des: "二十多万合作渠道自有独家资源.",
                    img: require("./img/3ping-icon-hailiangmeitiziyuan.png"),
                    hoverImg: require("./img/3ping-icon-hailiangmeitiziyuan-Hover.png")
                },
                {
                    name: "实时场景捕捉",
                    des: "实时掌握用户动态全面分析用户场景.",
                    img: require("./img/3ping-icon-jishichangjin.png"),
                    hoverImg: require("./img/3ping-icon-jishichangjin-Hover.png")
                },
                {
                    name: "精准定向能力",
                    des:
                        "基于每日处理分析的海量数据，帮广告主描绘出受众画像，及定向标签，匹配广告创意及素材，从而实现精准营销。",
                    img: require("./img/3ping-icon-jingzhun.png"),
                    hoverImg: require("./img/3ping-icon-jingzhun-Hover.png")
                },
                {
                    name: "灵活计费模式",
                    des: "投放成本可控 多种计费模式。",
                    img: require("./img/3ping-icon-linhuojifei.png"),
                    hoverImg: require("./img/3ping-icon-linhuojifei-Hover.png")
                },
                {
                    name: "专业服务团队",
                    des: "一对一客户服务 内部质量控制团队。",
                    img: require("./img/3ping-icon-zhuanyefuwu.png"),
                    hoverImg: require("./img/3ping-icon-zhuanyefuwu-Hover.png")
                }
            ]
        };
    },
    components: {},
    mounted() {},

    computed: {},

    methods: {
        beforeDestroy() {}
    }
};
</script>

<style lang="less" scoped>
.platform {
    .head {
        width: 1918px;
        height: 1080px;
        > img {
            width: 100%;
        }
    }
    .banner2 {
        width: 1920px;
        height: 1080px;
        position: relative;

        > img {
            width: 100%;
        }

        .box {
            position: absolute;
            display: flex;
            top: 0;
            left: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            .center();
            img {
                width: 600px;
                height: 500px;
                border: none;
            }
        }
        .customer {
            width: 600px;
            height: 500px;
            position: relative;
        }
        .mask {
            width: 600px;
            height: 500px;
            background: rgba(0, 0, 0, 0.6);
            position: absolute;
            top: 0;
            .center();
            flex-direction: column;
            transition: background-color 0.5s;
            p {
                width: 397px;
                font-size: 18px;
                line-height: 1.67;
                color: #ffffff;
                text-align: justify;
            }
            .img2 {
                position: relative;
                left: -0.2rem;
            }
        }

        .mask-hover .mask {
            background-color: rgba(14, 255, 252, 0.7);
        }

        .ralive-radius {
            width: 40px;
            height: 5px;
            border-radius: 2.5px;
            background-color: #ffffff;
            z-index: 500;
        }

        .mask > img {
            width: 118px;
            height: 118px;
        }
        .radius {
            width: 40px;
            height: 5px;
            border-radius: 2.5px;
            background-color: #ffffff;
            z-index: 200;
            margin-top: 20px;
        }

        .mask > h4 {
            font-size: 24px;
            line-height: 2;
            letter-spacing: 2.4px;
            text-align: left;
            color: #ffffff;
            margin-top: 20px;
        }
    }
    .feet {
        background: url(./img/3ping-beijing.png);
        background-size: cover;
        width: 100%;
        height: 1080px;
        position: relative;
        display: flex;
        .center();
    }
    .tail {
        background: url("./img/4ping-beijing.png");
        background-size: cover;
        width: 100%;
        height: 1077px;
    }
}
</style>
